<template>
  <div class="container">
    <div class="topSearch">
      <div class="form">
        <el-form
          ref="form"
          :model="vehicleParams"
          label-width="10px"
          class="formSelf"
        >
          <el-form-item>
            <el-input
              placeholder="驾驶员"
              v-model="vehicleParams.carDriver"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="vehicleParams.carStatus"
              placeholder="请选择车辆状态"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="vehicleParams.carType"
              placeholder="请选择车辆类型"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="search" icon="el-icon-search" @click="searchForm"
              >查询</el-button
            >
            <el-button
              class="reset"
              icon="el-icon-refresh-right"
              @click="resetForm"
              >重置</el-button
            >
            <el-button class="search" icon="el-icon-plus" @click="addVehicle"
              >新增车辆</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="tableBox">
      <div class="tableTitle"></div>
      <el-table v-loading="loading" :data="vehicleData" style="width: 100%">
        <el-table-column prop="carLicenseId" label="车牌号" width="140">
        </el-table-column>
        <el-table-column prop="carDriver" label="关联驾驶员"> </el-table-column>
        <el-table-column prop="carStatus" label="车辆状态">
          <template slot-scope="scope">
            <div
              :class="{
                yellowC: scope.row.carStatus == 1,
                redC: scope.row.carStatus == 3,
              }"
            >
              {{ scope.row.carStatusDesc }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="carTypeDesc" label="车辆类型"> </el-table-column>
        <el-table-column prop="gasStatus" label="车辆图片">
          <template slot-scope="scope">
            <div>
              <el-image
                style="width: 100px; height: 50px"
                :src="scope.row.carImage"
                :preview-src-list="scope.row.srcList"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="address" label="操作">
          <template slot-scope="scope">
            <div class="btnBox">
              <div
                slot="reference"
                class="first"
                v-permission="'problemRegisterDetail'"
                @click="addVehicle(scope.row)"
              >
                修改
              </div>
              <div
                slot="reference"
                class="first"
                v-permission="'problemRegisterDetail'"
                @click="deleteVehicle(scope.row)"
              >
                删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footerPage">
      <el-pagination
        :current-page="vehicleParams.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next"
        :total="vehicleTotal"
        @size-change="handleSizeChange"
        @current-change="currentPage"
      />
    </div>

    <addVehicle
      :addDialog.sync="addDialog"
      :dialogId="dialogId"
      ref="addVehicleRef"
    ></addVehicle>
  </div>
</template>

<script>
import addVehicle from "./components/addVehicle";
import { vehiclePageApi, vehicleUpdateApi } from "@/api/vehicleTable";

export default {
  name: "problemRegister",
  props: {},
  components: {
    addVehicle,
  },
  data() {
    return {
      vehicleData: [],
      vehicleParams: {
        page: 1,
        pageSize: 10,
        carDriver: "",
        carStatus: "",
        carType: "",
      },
      vehicleTotal: null,
      addDialog: false,
      dialogId: null,
      options1: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "维修中",
        },
        {
          value: "2",
          label: "报废",
        },
      ],
      options2: [
        {
          value: "0",
          label: "行政车辆",
        },
        {
          value: "1",
          label: "工作车辆",
        },
      ],
      detailDialog: false,
      problemDetailRef: null,
      addVehicleRef: null,
      loading: true,
    };
  },
  created() {
    this.vehiclePage();
  },
  methods: {
    searchForm() {
      this.vehicleParams.page = 1;
      this.vehiclePage();
    },
    resetForm() {
      this.vehicleParams = {
        page: 1,
        pageSize: 10,
        carDriver: "",
        carStatus: "",
        carType: "",
      };
      this.vehiclePage();
    },
    addVehicle(row) {
      if (row.id) {
        this.$refs.addVehicleRef.getDetail(row.id);
      }
      this.addDialog = true;
    },
    currentPage(val) {
      this.vehicleParams.page = val;
      this.vehiclePage();
    },
    handleSizeChange(val) {
      this.vehicleParams.pageSize = val;
      this.vehiclePage();
    },
    async vehiclePage() {
      const res = await vehiclePageApi({
        page: this.vehicleParams.page,
        pageSize: this.vehicleParams.pageSize,
        carDriver: this.vehicleParams.carDriver,
        carStatus: this.vehicleParams.carStatus,
        carType: this.vehicleParams.carType,
      });
      this.vehicleTotal = res.data.total;
      this.vehicleData = res.data.records.map((item) => {
        return {
          ...item,
          srcList: [item.carImage],
        };
      });
      this.loading = false;
    },
    deleteVehicle(row) {
      this.$confirm(
        `此操作将永久删除   ${row.carLicenseId}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          const res = await vehicleUpdateApi({ id: row.id, delFlag: 1 });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          this.vehiclePage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.container {
  .topSearch {
    background-color: #fff;
    height: 68px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .formSelf {
      display: flex;
      align-items: center;
      height: 68px;
      display: flex;
      align-items: center;
      .el-form-item {
        margin-bottom: 0px;
      }
      .search {
        background-color: #249451;
        color: #fff;
      }
      .reset {
        color: #249451;
        border: 1px solid #249451;
      }
      ::v-deep.el-input__inner {
        // background-color: #F5F5FA !important;
        color: #333 !important;
      }
      .el-input {
        width: 150px;
      }
      .el-select {
        width: 150px;
      }
    }
  }
  .tableBox {
    padding: 0 20px;
    background-color: #fff;
    .scopeImg {
      width: 50px;
      height: 50px;
    }
    .btnBox {
      display: flex;
      justify-content: center;
      align-items: center;
      .first {
        // width: 25px;
        height: 25px;
        line-height: 25px;
        // background-color: #4285f4;
        padding: 0 5px;
        color: #249451;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }
      .second {
        // width: 100px;
        height: 25px;
        line-height: 25px;
        background-color: #4285f4;
        color: #fff;
        text-align: center;
        margin-left: 5px;
        border-radius: 5px;
        cursor: pointer;
      }
      .third {
        // width: 50px;
        height: 25px;
        line-height: 25px;
        background-color: #d72e2e;
        color: #fff;
        text-align: center;
        margin: 0 5px;
        border-radius: 5px;
        cursor: pointer;
      }
      .third2 {
        width: 50px;
        height: 25px;
        line-height: 25px;
        background-color: #4285f4;
        color: #fff;
        text-align: center;
        margin: 0 5px;
        border-radius: 5px;
        cursor: pointer;
      }
      .last {
        width: 25px;
        height: 25px;
        line-height: 25px;
        background-color: #d72e2e;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }
    }
    .redC {
      color: #ff3057;
    }
    .yellowC {
      color: #ffd321;
    }
  }
  .footerPage {
    padding: 0 30px 0 0;
    display: flex;
    justify-content: right;
    width: 100%;
    background-color: #f8fafc;
    height: 50px;
    align-items: center;
    margin-top: 10px;

    //  ::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
    //   background-color: #087 !important;
    // }
  }
}
</style>
